<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/left.css">
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <script src="js/vue.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
            var admin_id = null;
            var href = location.href;
            if(href.indexOf("?")>0){
                var str = href.split("?")[1];
                admin_id = str.split("=")[1];
                console.log(admin_id)
            }
            var vue = new Vue({
                el:'#app',
                data:{
                    url:'http://localhost:8889',
                    powers:[],
                    admin:{status:0}
                },
                methods:{
                    find : function(){
                        if(admin_id){
                            var that = this;
                            var index = admin_id-1;
                            console.log(index)
                            $.getJSON(that.url+"/admin/find/"+admin_id,function (data) {
                                that.admin = data[0];
                                console.log(data[0].powers)
                                if(that.admin.powers){
                                    $("input[type=checkbox]").each(function(){
                                        var aid = this.value;
                                        for(i=0;i<that.admin.powers.length;i++){
                                            if(aid==that.admin.powers[i].id){
                                                this.checked = true;
                                                break;
                                            }
                                        }
                                    })
                                }
                            })
                        }
                    },
                    getpowers : function(){
                        var that = this;
                        $.getJSON(that.url+'/power/queryAll',function(data){
                            that.powers = data;

                        })
                    },
                    checkall : function (event) {
                        var btn = event.currentTarget;
                        var txt = $(btn).text();
                        if(txt=='全选') {
                            $("input[type=checkbox]").each(function(){
                                this.checked = true;
                            })
                            $(btn).text('取消');
                        }else{
                            $("input[type=checkbox]").each(function(){
                                this.checked = false;
                            })
                            $(btn).text('全选');
                        }
                    },
                    check : function (p,evnet) {
                        var that = this;
                        var ck = event.currentTarget;
                        if(p.pid==0){
                            $.each(that.powers,function(){
                                if(this.pid==ck.value){
                                    $("input[value="+this.id+"]")[0].checked = ck.checked;
                                }
                            })
                        }else{
                            $("input[value="+p.pid+"]")[0].checked = true;
                        }
                    },
                    save : function () {
                        var that = this;
                        var info = {
                            id:that.admin.id,
                            username:that.admin.username,
                            password:that.admin.password,
                            status:that.admin.status
                        }
                        var ids = "";
                        $("input[type=checkbox]").each(function () {
                            if(this.checked){
                                ids+=this.value+","
                            }
                        })
                        if(ids.indexOf(",")>0 && ids.length>0) {
                            ids = ids.substr(0, ids.length - 1);

                        }
                        info.ids = ids;
                        if((info.username==null)||(info.password==null)||(info.status==null)){
                            $(".msg").html("<span style='color:darkred'>请完善用户信息！</span>")
                        }else{
                            $.post(that.url+'/admin/save',info,function (data) {
                                if(data){
                                    $(".msg").html("<span style='color:darkgreen'>系统用户保存成功！</span>");
                                }else{
                                    $(".msg").html("<span style='color:darkred'>系统用户保存失败，请重试！</span>")
                                }
                            })
                        }

                    },

                }
            })
            vue.getpowers();
            vue.find();
            $("#header").load("header.html");
            $("#left").load("left.html");
        })
    </script>
    <style>
        .remark{
            margin-top: 20px;
            color: #737373;
        }
        .msg{padding-top:10px;font-size:16px;font-weight: bold}

    </style>
    <title>管理员用户注册</title>
</head>
<body>
    <div class="container-fluid" id="app">
        <div class="row" id="header"></div>
        <div class="row">
            <div class="col-md-2" id="left"></div>

            <div class="col-md-9"  style="margin-left:30px;margin-top:10px">
                <div class="row col-md-10">
                    <div class="row tithead"style="margin-left: 15px">
                        <div class="col-md-4">
                            <h3 class="glyphicon glyphicon-lock"> 管理员管理
                            </h3>
                        </div>
                        <div class="col-md-6"></div>
                        <div class="col-md-2" >
                            <h4 style="margin-top:30px;margin-left:30px">
                                <a href="admins.html" style="text-decoration:none;color: #666666">
                                    管理员列表 <i class="glyphicon glyphicon-chevron-right"></i>
                                </a>
                            </h4>
                        </div>

                    </div>
                    <ul class="nav nav-tabs" role="tablist" style="margin-bottom: 30px;margin-top: 10px">
                        <li role="presentation" class="active">
                            <a href="#coa" aria-controls="coa" role="tab" data-toggle="tab">管理员信息</a>
                        </li>

                    </ul>
                    <div class="form-group">
                        <div class="input-group">
                            <label class="input-group-addon">账号</label>
                            <input v-model="admin.username" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <label class="input-group-addon">密码</label>
                            <input v-model="admin.password" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <label class="input-group-addon">角色</label>
                            <select v-model="admin.status" class="form-control">
                                <option value="0">普通用户</option>
                                <option value="1">超级用户</option>
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-1" style="padding:0 20px">
                            权限列表
                        </div>
                        <div class="col-md-11">
                            <div class="row">
                                <div v-for="p in powers" class="col-md-3">
                                    <input @click="check(p,$event)" :value="p.id" type="checkbox">
                                    <span>{{p.pname}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="margin-top: 30px">
                        <div class="col-md-2">

                        </div>
                        <div class="col-md-7">
                            <p class="msg"></p>
                        </div>
                        <div class="col-md-1">
                            <button @click="checkall($event)" class="btn btn-default">全选</button>
                        </div>
                        <div class="col-md-2">
                            <button @click="save" class="btn btn-primary btn-block">保存</button>
                        </div>
                    </div>
                    <div class="row text-right remark"><h5>备注：操作一 分为授课和停课，点击停课即预约不到此教练的信息，反之亦然. </h5></div>
                </div>

            </div>
        </div>
    </div>
</body>
</html>